<template>
	<gui-page  :customHeader="true" :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gHeader">
				<view class="header-search gui-border-box">
					<gui-search :background="'#f2f2f2'" @clear="search" @confirm="search"></gui-search>
				</view>	
		</view>
		
		<view slot="gBody" class="gui-flex1">
			<!-- 搜索框 -->
			
			<!-- 主体区域 -->
			<view class="gui-flex gui-rows gui-space-between">
				<!-- 左侧分类列表 -->
				<scroll-view :scroll-y="true" :show-scrollbar="false" 
				:scroll-with-animation="true" :scroll-into-view="leftTo" 
				class="gui-cate-left" :style="{height:mainHeight+'px'}">
					<view class="gui-cate-left-item gui-border-box" 
					v-for="(item, index) in mainCate" :key="index" 
					:class="[currentCateIndex == item.cateid ? 'gui-cate-left-current' : '']" 
					:id="'cate'+item.cateid">
						<text class="gui-border-l" 
						:class="['gui-cate-left-item-title','gui-block-text', currentCateIndex == item.cateid ? 'gui-cate-left-current' : '']" 
						:data-cateid="item.cateid" 
						@tap="changCate">{{item.name}}</text>
					</view>
				</scroll-view>
				<!-- 右侧列表 -->
				<scroll-view 
				:scroll-into-view="productListTo" :show-scrollbar="false" 
				:scroll-with-animation="true" :scroll-y="true" 
				class="gui-cate-right" 
				:style="{height:mainHeight+'px'}" @scroll="rscroll">
					<!-- 循环展示分类及分类对应的产品列表 -->
					<view class="gui-margin-top" :id="'productList'+cate.cateid" 
					v-for="(cate, idx) in mainCate" :key="idx">
						<text class="gui-block-text gui-h6 gui-bold gui-color-gray gui-cate-right-title">{{cate.name}}</text>
						<!-- 循环展示产品 -->
						<view class="gui-flex gui-rows gui-nowrap gui-cate-product-list" 
						v-for="(product, pidx) in cate.products" :key="pidx" 
						:id="'products'+product.id" @tap='tiao(product.id)'
						 :data-parentid="cate.cateid">
							<view class="gui-cate-pimg">
								<gui-image :src=" imgServer+product.goods_img" :width="150" :height="150" borderRadius="10rpx"></gui-image>
							</view>
							<view class="gui-cate-pbody">
								<text class="gui-text gui-primary-color gui-block-text title">{{product.goods_name}}</text>
								<view class="gui-flex gui-rows gui-nowrap gui-space-between">
									<text class="gui-cate-price gui-color-red">￥{{product.shop_price}}</text>
									<text class="gui-cate-price xiao">已售：3000</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</gui-page>
</template>
<script>
var graceJS = require('@/lizhili/js/grace.js');
export default {
	data() {
		return {
			// 全屏加载，当数据请求完毕时关闭
			pageLoading : true,
			// 核心区域高度
			mainHeight  : 300,
			// 左侧分类定位
			leftTo      : 'cate',
			// 标识切换时左侧点击触发的
			isLeftTap   : false,
			// 左侧分类数据
			mainCate    : [],
			// 当前分类
			currentCateIndex : 1,
			// 延迟执行防止卡顿
			scrollTimer : null,
			// 产品列表滚动定位
			productListTo: '',
			imgServer:''
		}
	},
	onLoad:function(){
		this.imgServer=uni.common.obs
		// 获取页面主体高度从而得出主体高度
		graceJS.getRefs('guiPage', this, 0, (ref)=>{
			ref.getDomSize('guiPageBody', (e)=>{
				console.log(e);
				// 02. 导航的高度
				// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
				this.mainHeight  = e.height;
			});
		});
		
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'get_goods_cate',
			},
			false,
			res => {
				if (res.code == 1) {
					this.mainCate=res.data
					this.pageLoading = false;
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取错误'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
		
	},
	methods: {
		tiao(e){
			uni.navigateTo({
				url:'shop_detail?id='+e
			})
		},
		changCate : function (e) {
			this.isLeftTap = true;
			var cateid = e.currentTarget.dataset.cateid;
			this.currentCateIndex = cateid;
			if(cateid == 1){
				this.productListTo     = 'productList2';
				this.$nextTick(()=>{
					this.productListTo = 'productList' + cateid;
				});
			}else{
				this.productListTo     = 'productList' + cateid;
			}
			setTimeout(()=>{this.isLeftTap = false;},3000)
			
		},
		rscroll : function(e){
			if(this.isLeftTap){return ;}
			if(this.scrollTimer != null){
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(()=>{this.getIndex();}, 100);
		},
		// 动态识别分类激活
		getIndex: function (i){
			const query = uni.createSelectorQuery()
			query.selectAll('.gui-cate-product-list').boundingClientRect()
			query.selectViewport().scrollOffset()
			query.exec((res) => {
				var products = res[0];
				for(let i = 0; i < products.length; i++){
					if (products[i].top > 0 && products[i].top >= this.mainHeight / 2){
						this.currentCateIndex = products[i].dataset.parentid,
						this.leftTo = 'cate' + products[i].dataset.parentid;
						break ;
					}
				}
				console.log(this.leftTo);
			});
		},
		// 搜索
		search : function(e){
			var kwd = e;
			var searchIndex = -1;
			var index = 0;
			for(var k in this.mainCate){
				for(var i = 0; i < this.mainCate[k].products.length; i++){
					if(this.mainCate[k].products[i].goods_name.indexOf(kwd) != -1){
						searchIndex = this.mainCate[k].products[i].id;
						break;
					}
					index++;
				}
				if(searchIndex != -1){break ;}
			}
			if(searchIndex != -1){
				this.productListTo = 'products' + searchIndex;
			}
		}
	}
}
</script>
<style>
.header-search{padding:20rpx; width:750rpx;}
.gui-cate-left{width:200rpx; background-color:#F6F7F8;}
.gui-cate-right{width:520rpx; overflow:hidden;}
.gui-cate-left-item{height:100rpx; padding:35rpx 0; font-size:26rpx;}
.gui-cate-left-item-title{line-height:32rpx; font-size:28rpx; border-color:#F6F7F8; border-left-width:8rpx; text-align:center;}
.gui-cate-left-current{border-color:#FF0066 !important; background-color:#FFFFFF; color:#FF0066; font-weight:bold;}
.gui-cate-right-title{line-height:80rpx;}
.gui-cate-product-list{
	margin-bottom:30rpx; 
	margin-right:25rpx;
	padding-bottom:30rpx ;
	border-bottom:1rpx solid #ececec ;
}
.gui-cate-pimg{width:150rpx;}
.gui-cate-pbody{margin-left:30rpx; width:100rpx; flex:1; padding-top:-20rpx;}
.gui-cate-price{font-size:32rpx; line-height:60rpx;}
.title{
	overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
}
.xiao{
	font-size: 25rpx;
	color: #aeaeaf;
}
</style>